import { useEffect, useRef } from 'react'
import THREEProject from '../utils/index'
import {arrNomarlize} from '../utils/helper'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const BufferGeometryII = () => {
  const can = useRef(null)
  const pro = new THREEProject([1, 1, 1])
  const { thr, renderer, scene, axes, camera, controls } = pro
  const init = () => {
    scene.add(axes)

    const loader = new GLTFLoader()
    loader.load('/assets/七星河.glb', (gltf) => {
        console.log('finish ====>', scene, gltf)
        scene.add(gltf.scene)
    } )
    // scene.add(gltf.scene)
    appendRenderDom()
    animate()
  }


  const appendRenderDom = () => {
    if(!can.current.children.length) {
      can.current.appendChild(renderer.domElement)
    }
  }

  const render = () => {
    controls.update()
    renderer.render(scene, camera)
  }

  const animate = () => {
    requestAnimationFrame(animate)
    render()
  }

  useEffect(init, [])

  return (
    <div ref={can}></div>
  )
}

export default BufferGeometryII
export {
  BufferGeometryII
}